<template>
    <div>
        <div class="main">
            <table cellspacing="0">
                <thead>
                    <tr style="width: fit-content;">
                        <th>名称/标题</th>
                        <th>标题2</th>
                        <th>标题3</th>
                        <th>标题4</th>
                        <th>标题5</th>
                        <th>标题6</th>
                        <th>标题7</th>
                        <th>标题8</th>
                        <th>标题9</th>
                        <th>标题10</th>
                        <th>标题11</th>
                        <th>标题12</th>
                        <th>标题13</th>
                        <th>标题14</th>
                        <th>标题15</th>
                    </tr>
                </thead>
                <tbody  style="width: fit-content;">
                    <!--vue的 v-for的遍历-->
                    <tr v-for="(item,index) in 50" :key="index">
                        <td>index1</td>
                        <td>index2</td>
                        <td>index3</td>
                        <td>index4</td>
                        <td>index5</td>
                        <td>index6</td>
                        <td>index7</td>
                        <td>index8</td>
                        <td>index9</td>
                        <td>index10</td>
                        <td>index11</td>
                        <td>index12</td>
                        <td>index13</td>
                        <td>index14</td>
                        <td>index15</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    name:'report',
    data(){
        return{
            message:'hello'
        }
    }
}
</script>
<style scoped>
.main{
    /* width:1000px; */
    overflow:auto;
    height:625px;
}
td,th{
    border:1px solid gray;
    width:100px;
    height:30px;
}
th{
background-color:lightgray;
}
table{
    table-layout:fixed;
    width:2000px;
}
td:first-child,th:first-child{
    position:sticky;
    left:0;
    z-index:1;
    background-color:lightblue;
}
thead tr th{
    position:sticky;
    top:0;
}
th:first-child{
    z-index:2;
    background-color:lightgray;
}
</style>
